500ピクセル幅のテンプレート　1

シンプルなテンプレ 1

　width="500"（テーブル幅、500ピクセル）のテンプレート
楽天広場での使用では”自動改行無し”で使ってください！！

幅が500ピクセルのテーブルは楽天広場の場合、両サイドにサブ項目を表示させるレイアウトの設定をなさっていらっしゃる方に便利です。

サンプル１

バナーの説明や紹介文を書くスペース

@10

@11

@12

コピペ用タグ

<TABLE width="500" align="center" cellPadding=2 cellSpacing=1 bgcolor="#99ccff" style="border: 1px dotted #99ccff;">
<TBODY>
<TR align="center" valign="middle">
<TDwidth="90" height="90" bgcolorr=#99ccff>

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@1</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@2</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@3</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@4</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@5</td></tr> </table>

</TD>
</TR>

　<TR align="center" valign="middle">
<TD height="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@6</td></tr> </table>

</TD>
<TD colSpan=3 align=left valign="top">バナーの説明や紹介文を書くスペース
</TD>
<TD height="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@7</td></tr> </table>

</TD>
</TR>


<TR align="center" valign="middle">
<TDwidth="90" height="90" >

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@8</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@9</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@10</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@11</td></tr> </table>

</TD>
<TD width="100">

<table width="100%" border="0"bgcolor="#ffffff" cellspacing="0" cellpadding="2"> <tr> <td height="100" align="center" valign="top" bgcolorr="#ffffff">@12</td></tr> </table>

</TD>
</TR>

</TBODY></TABLE>

タグ解説

*　のはコメントといってブラウザに表示されない記号です。
　ご自分でわかりやすいようにところどころに目印として使うと便利ですが、使いすぎるとその分文字数が増えますので注意してください。

*　このテンプレートは、3行5列の大きな水色（#99ccff）のテーブルに、1行1列の100x100ピクセルの白い（#ffffff）テーブルをはめ込んで作ってます。

テーブルの色を変える場合はそれぞれのカラーコードを変えればOKです。

⇒　カラーコード一覧

*　2行目の大きな水色の枠には、回りに貼ったバナーの説明やタイトルを入れるといいと思います。

*　一番外側のドット（点線）は　 style="border: 1px dotted #99ccff;"　で指定されています。

ドットがいらない場合は手前の半角スペースから、後ろの　"　までを削除します。
ドットを大きくしたいときは、　（1px）の数字を大きくします。　・・・ex.　1px→5px

dotted をdashedに変更すると、点線から破線に変わります。

ex.

style="border: 1px dotted #99ccff;" → style="border: 1px dashed #99ccff;"

別バージョン

　ここはテキストを入れても

　　バナーを入れてもいいし・・・　入れなくてもOK！

　フリーです

　画像1

　画像2

　画像３

　画像4

　画像５

　　　商品の説明や題を入れる場所

　画像６

　画像７

　画像８

　画像９

　画像10

　こちらも

　ご自由に　　ただし長いと間延びします

ご活用ください　

<table width="500" border="0" cellspacing="6" cellpadding="0" style="border: 1px solid #663333;"> <tr> <td width="25%" bgcolor="#CFB49A">　ここはテキストを入れても</td><td colspan="2">　　バナーを入れてもいいし・・・　入れなくてもOK！　</td><td width="25%" bgcolor="#CFB49A">　フリーです</td></tr> <tr> <td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像1</td></tr> </table></td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像2</td></tr> </table></td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像３</td></tr> </table></td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像4</td></tr> </table></td></tr> <tr> <td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像５</td></tr> </table></td><td colspan="2">　　　商品の説明や題を入れる場所</td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像６</td></tr> </table></td></tr> <tr> <td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像７</td></tr> </table></td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像８</td></tr> </table></td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像９</td></tr> </table></td><td width="25%" align="center" valign="middle"><table width="90" height="90" border="1" cellpadding="4" cellspacing="0" bordercolor="#663333"> <tr> <td>　画像10</td></tr> </table></td></tr> <tr> <td width="25%" align="left" valign="baseline" bgcolor="#CFB49A">　こちらも</td><td colspan="2">　ご自由にただし長いと間延びします　　</td><td width="25%" align="right" valign="baseline" bgcolor="#CFB49A">ご活用ください　</td></tr> </table>

500ピクセル幅のテンプレート 1

500ピクセル幅のテンプレート　1